<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<input type="text" placeholder="请输入0-100之间的整数" id="i1">
<input type="button" value="猜一猜" onclick="f()">
<div>结果：<span id="id1"></span></div>
<!--<div>答案：<span id="id2"></span></div>-->

<script>
    let s1 = document.querySelector("#id2");
    //得到0-100随机整数
    let x = parseInt(Math.random()*101);
    // s1.innerText=x;
    let c = 0;
    function f(){
        c++;
        let i = document.querySelector("#i1");
        let s = document.querySelector("#id1");

        if(isNaN(i.value)){
            s.innerText = "输入错误！"
            return;
        }
        if(i.value<x){
            s.innerText = "猜小了";
        }else if(i.value>x){
            s.innerText = "猜大了";
        }else {
            s.innerText = "猜对了！猜了"+c+"次";
        }
    }

</script>

</body>
</html>